<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>上升星座测算 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7', // 主紫色
                        secondary: '#FD79A8', // 辅助粉色
                        zodiac: {
                            aries: '#FF6B6B',    // 白羊座-红色
                            taurus: '#4ECDC4',   // 金牛座-青色
                            gemini: '#FFD166',   // 双子座-黄色
                            cancer: '#06D6A0',   // 巨蟹座-绿色
                            leo: '#FF8C42',      // 狮子座-橙色
                            virgo: '#118AB2',    // 处女座-蓝色
                            libra: '#073B4C',    // 天秤座-深青色
                            scorpio: '#7209B7',  // 天蝎座-深紫色
                            sagittarius: '#F72585',//射手座-玫红色
                            capricorn: '#3A0CA3',//摩羯座-暗紫色
                            aquarius: '#4361EE', // 水瓶座-亮蓝色
                            pisces: '#4CC9F0'    // 双鱼座-浅蓝色
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .starry-bg {
                background-image: radial-gradient(circle, rgba(108, 92, 231, 0.1) 1px, transparent 1px);
                background-size: 30px 30px;
            }
            .star-twinkle {
                animation: twinkle 2s ease-in-out infinite;
            }
            .float {
                animation: float 6s ease-in-out infinite;
            }
            .rotate-slow {
                animation: rotate 20s linear infinite;
            }
            @keyframes twinkle {
                0%, 100% { opacity: 1; transform: scale(1); }
                50% { opacity: 0.6; transform: scale(1.1); }
            }
            @keyframes float {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-15px); }
            }
            @keyframes rotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen flex flex-col">


    <!-- 主内容区 -->
    <main class="flex-1 pt-5 pb-24 px-4">
        <div class="container mx-auto max-w-md">
            <!-- 上升星座介绍 -->
            <div class="bg-white rounded-xl shadow-sm p-5 mb-6 relative overflow-hidden">
                <div class="absolute inset-0 starry-bg opacity-30"></div>
                
                <div class="relative z-10">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0 float">
                            <i class="fa fa-sun-o text-primary"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold mb-1">什么是上升星座？</h2>
                            <p class="text-sm text-gray-600">
                                上升星座又称生辰星位，是指出生时东方地平线上升起的星座。它代表着你的外在形象、气质和给人的第一印象，是你人格的面具。
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-primary/5 rounded-lg p-3 text-sm text-primary">
                        <i class="fa fa-lightbulb-o mr-2"></i>
                        <span>准确计算上升星座需要精确的出生时间、日期和地点，误差越小结果越准确</span>
                    </div>
                </div>
            </div>
            
            <!-- 出生信息表单 -->
            <div id="birth-info-form" class="bg-white rounded-xl shadow-sm p-5 mb-6 relative overflow-hidden">
                <div class="absolute inset-0 starry-bg opacity-30"></div>
                
                <h2 class="text-lg font-semibold mb-4 relative z-10">请输入你的出生信息</h2>
                
                <form id="calculator-form" class="space-y-4 relative z-10">
                    <!-- 出生日期 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                        <input type="date" id="birth-date" required
                            class="w-full p-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    </div>
                    
                    <!-- 出生时间 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出生时间 <span class="text-xs text-gray-500">(精确到分钟)</span></label>
                        <input type="time" id="birth-time" required
                            class="w-full p-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    </div>
                    
                    <!-- 出生地点 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出生地点</label>
                        <input type="text" id="birth-place" placeholder="例如：北京市" required
                            class="w-full p-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    </div>
                    
                    <!-- 时区选择 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">时区</label>
                        <select id="timezone" 
                            class="w-full p-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="GMT+8">GMT+8 中国标准时间</option>
                            <option value="GMT+0">GMT+0 格林威治标准时间</option>
                            <option value="GMT-5">GMT-5 美国东部时间</option>
                            <option value="GMT+9">GMT+9 日本标准时间</option>
                            <option value="GMT+1">GMT+1 欧洲中部时间</option>
                        </select>
                    </div>
                    
                    <!-- 计算按钮 -->
                    <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors shadow-md">
                        计算我的上升星座
                    </button>
                </form>
            </div>
            
            <!-- 上升星座结果（默认隐藏） -->
            <div id="ascendant-result" class="hidden space-y-6">
                <!-- 结果概览 -->
                <div class="bg-white rounded-xl shadow-sm p-5 relative overflow-hidden">
                    <div class="absolute inset-0 starry-bg opacity-30"></div>
                    
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                            <div id="ascendant-icon" class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white bg-zodiac-aries rotate-slow">
                                <i class="fa fa-star text-xl"></i>
                            </div>
                            <h2 class="text-xl font-bold text-primary mb-1" id="ascendant-name">你的上升星座是白羊座</h2>
                            <p class="text-sm text-gray-500" id="ascendant-period">约在日出后1-2小时出生</p>
                        </div>
                        
                        <div class="bg-gray-50 rounded-lg p-4 mb-4">
                            <h3 class="text-sm font-medium mb-2">上升星座特质</h3>
                            <p class="text-sm text-gray-600" id="ascendant-traits">
                                上升白羊座的人通常给人精力充沛、热情洋溢的第一印象。你的外在形象充满活力，行动果断，给人一种积极进取的感觉。即使你的太阳星座比较内向，上升星座也会让你在初次见面时显得开朗外向。
                            </p>
                        </div>
                        
                        <button id="recalculate-btn" class="w-full bg-primary/10 text-primary py-2.5 rounded-lg text-sm font-medium hover:bg-primary/20 transition-colors">
                            <i class="fa fa-refresh mr-1"></i> 重新计算
                        </button>
                    </div>
                </div>
                
                <!-- 详细解析 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h3 class="text-base font-semibold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i>上升星座详细解析
                    </h3>
                    
                    <div class="space-y-4 text-sm">
                        <div>
                            <h4 class="font-medium text-primary mb-2">外在形象与气质</h4>
                            <p class="text-gray-600" id="appearance-analysis">
                                上升白羊座的人通常拥有锐利的眼神和充满活力的外表，动作敏捷，走路姿态坚定有力。你的面部特征可能带有明显的轮廓，表情丰富且直接，不喜欢掩饰自己的情绪。即使在放松的状态下，也给人一种随时准备行动的感觉。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">人际关系表现</h4>
                            <p class="text-gray-600" id="relationship-analysis">
                                在人际交往中，你通常主动热情，不喜欢拐弯抹角。初次见面时，你可能会主动开启话题，表现出强烈的好奇心。你给人的第一印象是坦率、真诚，虽然有时可能显得有些冲动或直接，但人们通常会欣赏你的真诚和热情。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">与太阳星座的互动</h4>
                            <p class="text-gray-600" id="sun-interaction">
                                上升星座与太阳星座共同构成了你的人格全貌。如果你的太阳星座是水象星座（巨蟹、天蝎、双鱼），上升白羊座会为你增添行动力和决断力；如果你的太阳星座是火象星座（白羊、狮子、射手），则会强化你的热情和行动力；如果是土象或风象星座，上升白羊座会为你带来更多活力和主动性。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 分享和保存按钮 -->
                <div class="flex gap-3">
                    <button class="flex-1 bg-secondary text-white py-2.5 rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors">
                        <i class="fa fa-share-alt mr-1"></i> 分享结果
                    </button>
                    <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
                        <i class="fa fa-bookmark-o mr-1"></i> 保存结果
                    </button>
                </div>
            </div>
            
            <!-- 上升星座知识卡片 -->
            <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                <h3 class="text-sm font-medium mb-3 flex items-center">
                    <i class="fa fa-book text-primary mr-2"></i>上升星座小知识
                </h3>
                <div class="space-y-2 text-sm text-gray-600">
                    <p class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2 text-xs"></i>
                        <span>上升星座大约每2小时变换一次，因此精确的出生时间对测算至关重要</span>
                    </p>
                    <p class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2 text-xs"></i>
                        <span>太阳星座代表你的核心本质，上升星座代表你的外在表现</span>
                    </p>
                    <p class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2 text-xs"></i>
                        <span>上升星座也会影响你的穿着风格和审美偏好</span>
                    </p>
                    <p class="flex items-start">
                        <i class="fa fa-check-circle text-primary mt-1 mr-2 text-xs"></i>
                        <span>在占星学中，上升星座是命盘的第一宫，影响个人的整体运势</span>
                    </p>
                </div>
            </div>
        </div>
    </main>

    <!-- 星空装饰元素 -->
    <div class="fixed top-1/4 left-5 w-6 h-6 rounded-full bg-primary/20 star-twinkle z-0"></div>
    <div class="fixed top-1/2 right-8 w-4 h-4 rounded-full bg-secondary/20 star-twinkle z-0" style="animation-delay: 0.5s"></div>
    <div class="fixed bottom-1/3 left-10 w-5 h-5 rounded-full bg-primary/20 star-twinkle z-0" style="animation-delay: 1s"></div>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span class="text-xs mt-1">测试</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab">
                    <i class="fa fa-moon-o text-lg"></i>
                    <span class="text-xs mt-1">运势</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab">
                    <i class="fa fa-user-o text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // 上升星座数据
        const ascendantData = {
            aries: {
                name: "白羊座",
                color: "zodiac-aries",
                period: "约在日出后1-2小时出生",
                traits: "上升白羊座的人通常给人精力充沛、热情洋溢的第一印象。你的外在形象充满活力，行动果断，给人一种积极进取的感觉。即使你的太阳星座比较内向，上升星座也会让你在初次见面时显得开朗外向。",
                appearance: "上升白羊座的人通常拥有锐利的眼神和充满活力的外表，动作敏捷，走路姿态坚定有力。你的面部特征可能带有明显的轮廓，表情丰富且直接，不喜欢掩饰自己的情绪。即使在放松的状态下，也给人一种随时准备行动的感觉。",
                relationship: "在人际交往中，你通常主动热情，不喜欢拐弯抹角。初次见面时，你可能会主动开启话题，表现出强烈的好奇心。你给人的第一印象是坦率、真诚，虽然有时可能显得有些冲动或直接，但人们通常会欣赏你的真诚和热情。",
                sunInteraction: "上升星座与太阳星座共同构成了你的人格全貌。如果你的太阳星座是水象星座（巨蟹、天蝎、双鱼），上升白羊座会为你增添行动力和决断力；如果你的太阳星座是火象星座（白羊、狮子、射手），则会强化你的热情和行动力；如果是土象或风象星座，上升白羊座会为你带来更多活力和主动性。"
            },
            taurus: {
                name: "金牛座",
                color: "zodiac-taurus",
                period: "约在日出后2-4小时出生",
                traits: "上升金牛座的人通常给人稳重、踏实的第一印象。你的外在形象平和、可靠，举止从容不迫，给人一种安全感。你不喜欢夸张的表达方式，倾向于用实际行动来证明自己。",
                appearance: "上升金牛座的人通常拥有坚实的体格和温和的面部特征，眼神沉稳，笑容亲切。你的姿态从容，动作缓慢而坚定，给人一种踏实可靠的感觉。你可能偏爱舒适自然的穿着风格，不喜欢过于花哨的装扮。",
                relationship: "在人际交往中，你通常表现得温和、友善，是一个很好的倾听者。你不喜欢冲突和争吵，倾向于维持和谐的人际关系。初次见面时，你可能显得有些保守或害羞，但熟悉之后会展现出忠诚和可靠的一面。",
                sunInteraction: "上升金牛座会为你的人格增添稳重和实际的特质。如果你的太阳星座是火象星座，上升金牛座会为你带来更多耐心和毅力；如果是风象星座，则会增加你的专注力和执行力；如果是水象或土象星座，会强化你的稳定性和可靠性。"
            },
            gemini: {
                name: "双子座",
                color: "zodiac-gemini",
                period: "约在日出后4-6小时出生",
                traits: "上升双子座的人通常给人机智、灵活的第一印象。你的外在形象充满活力，思维敏捷，善于言辞，给人一种聪明伶俐的感觉。你好奇心强，对周围的一切都充满兴趣，喜欢与人交流想法。",
                appearance: "上升双子座的人通常身材修长，动作灵活，眼神灵动，表情丰富。你的手势和肢体语言较多，说话语速可能较快，给人一种思维活跃的印象。你可能偏爱时尚多变的穿着风格，喜欢尝试新的造型。",
                relationship: "在人际交往中，你通常表现得友善、健谈，善于开启话题和维持对话。你适应能力强，能与不同类型的人建立联系。初次见面时，你可能会表现出强烈的好奇心，不断提出问题，让人感觉亲切而有趣。",
                sunInteraction: "上升双子座会为你的人格增添机智和沟通能力。如果你的太阳星座是土象星座，上升双子座会为你带来更多灵活性和社交能力；如果是水象星座，则会增加你的表达能力和思维活跃度；如果是风象或火象星座，会强化你的沟通技巧和好奇心。"
            },
            // 其他星座数据省略，实际应用中应包含全部12个星座
            cancer: { name: "巨蟹座", color: "zodiac-cancer" },
            leo: { name: "狮子座", color: "zodiac-leo" },
            virgo: { name: "处女座", color: "zodiac-virgo" },
            libra: { name: "天秤座", color: "zodiac-libra" },
            scorpio: { name: "天蝎座", color: "zodiac-scorpio" },
            sagittarius: { name: "射手座", color: "zodiac-sagittarius" },
            capricorn: { name: "摩羯座", color: "zodiac-capricorn" },
            aquarius: { name: "水瓶座", color: "zodiac-aquarius" },
            pisces: { name: "双鱼座", color: "zodiac-pisces" }
        };

        // 根据出生时间计算上升星座（简化版算法）
        function calculateAscendant(birthDate, birthTime) {
            // 在实际应用中，这里应该使用精确的占星学算法
            // 这里使用简化的时间映射关系
            
            // 解析出生时间
            const [hours, minutes] = birthTime.split(':').map(Number);
            const totalMinutes = hours * 60 + minutes;
            
            // 每2小时对应一个上升星座（简化模型）
            const zodiacs = ['aries', 'taurus', 'gemini', 'cancer', 'leo', 'virgo', 
                            'libra', 'scorpio', 'sagittarius', 'capricorn', 'aquarius', 'pisces'];
            const index = Math.floor((totalMinutes / 120) % 12);
            
            return zodiacs[index];
        }

        // DOM元素
        const calculatorForm = document.getElementById('calculator-form');
        const birthInfoForm = document.getElementById('birth-info-form');
        const ascendantResult = document.getElementById('ascendant-result');
        const backButton = document.getElementById('back-button');
        const recalculateBtn = document.getElementById('recalculate-btn');
        const birthDateInput = document.getElementById('birth-date');
        const birthTimeInput = document.getElementById('birth-time');
        
        // 设置默认日期为1990-01-01，时间为12:00
        document.addEventListener('DOMContentLoaded', () => {
            birthDateInput.value = '1990-01-01';
            birthTimeInput.value = '12:00';
        });

        // 表单提交事件
        calculatorForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const birthDate = document.getElementById('birth-date').value;
            const birthTime = document.getElementById('birth-time').value;
            const birthPlace = document.getElementById('birth-place').value;
            
            // 简单验证
            if (!birthDate || !birthTime || !birthPlace) {
                alert('请填写完整的出生信息');
                return;
            }
            
            // 计算上升星座
            const ascendant = calculateAscendant(birthDate, birthTime);
            const ascendantInfo = ascendantData[ascendant] || ascendantData.aries;
            
            // 更新结果页面
            document.getElementById('ascendant-icon').className = `w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white bg-${ascendantInfo.color} rotate-slow`;
            document.getElementById('ascendant-name').textContent = `你的上升星座是${ascendantInfo.name}`;
            document.getElementById('ascendant-period').textContent = ascendantInfo.period || '根据你的出生时间计算';
            
            // 更新详细信息（如果存在）
            if (ascendantInfo.traits) document.getElementById('ascendant-traits').textContent = ascendantInfo.traits;
            if (ascendantInfo.appearance) document.getElementById('appearance-analysis').textContent = ascendantInfo.appearance;
            if (ascendantInfo.relationship) document.getElementById('relationship-analysis').textContent = ascendantInfo.relationship;
            if (ascendantInfo.sunInteraction) document.getElementById('sun-interaction').textContent = ascendantInfo.sunInteraction;
            
            // 切换到结果页面
            birthInfoForm.classList.add('hidden');
            ascendantResult.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        });

        // 重新计算按钮点击事件
        recalculateBtn.addEventListener('click', () => {
            // 切换回表单页面
            ascendantResult.classList.add('hidden');
            birthInfoForm.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        });

        // 返回按钮点击事件
        backButton.addEventListener('click', () => {
            // 返回首页
            window.location.href = 'index.html';
        });

        // 为Tab按钮添加点击事件
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有活跃状态
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('tab-active'));
                // 添加当前活跃状态
                this.classList.add('tab-active');
                
                // 在实际应用中，这里应该跳转到相应的页面
                const tabId = this.getAttribute('data-tab');
                if (tabId !== 'test-tab') {
                    window.location.href = `index.html#${tabId}`;
                }
            });
        });
    </script>
</body>
</html>
